<template>
  <CustomNavbar />
  <scroll-view
    class="scroll-view"
    scroll-y="true"
    @scrolltolower="handleScrollToLower"
  >
    <XtxSwiper :swipperList="swipperList" />
    <CategoryPanel />
    <HotPanel />
    <XtxGuess ref="guessRef" />
    <view>挣扎加载···</view>
  </scroll-view>
</template>

<script setup>
import CustomNavbar from "./components/customNavbar.vue";
import CategoryPanel from "./components/categoryPanel.vue";
import HotPanel from "./components/hotPanel.vue";
import { reqSwiper } from "@/api/component/getSwapper";
import { onMounted, ref } from "vue";
import { useGuess } from "@/composable";

const swipperList = ref([]);
const categoryId = ref(1);
const { guessRef, getGuess } = useGuess();

onMounted(() => {
  getSwiper();
});
const getSwiper = async () => {
  const result = await reqSwiper(categoryId.value);

  swipperList.value = result.data;
};
const handleScrollToLower = async (e) => {
  getGuess();
};
</script>

<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: lightgray;
}
.scroll-view {
  flex: 1;
  height: calc(100% + 270rpx);
}
</style>
